<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-table :border="true" :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="商品id" width="80"></el-table-column>
        <el-table-column prop="name" label="商品名称" width="120"></el-table-column>
        <el-table-column prop="cover" label="商品图片" width="120">
          <template v-slot="$props">
            <!-- $props获取到的是数据列表 -->
            <img :src="$props.row.cover" alt style="height:60px" />
          </template>
        </el-table-column>
        <el-table-column prop="brand" label="商品品牌" width="100"></el-table-column>
        <el-table-column prop="category" label="所属分类" width="100"></el-table-column>
        <el-table-column prop="price" label="商品价格" width="100"></el-table-column>
        <el-table-column prop="sales_volume" label="销量" width="100"></el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <!--$scope中接收到的是商品列表数组; $scope.row表示每一个商品对象-->
          <template v-slot="$scope">
            <!-- 注意数据类型 -->
            <el-tag @click="updateStatus($scope.row)" type="success" effect="dark" v-if="$scope.row.status==1">上架</el-tag>
            <el-tag @click="updateStatus($scope.row)" type="info" effect="dark" v-else>下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <!--  -->
          <template v-slot="$props">
            <el-button type="danger" @click="del($props.row.id)" size="mini">删除</el-button>
            <el-button type="primary" @click="update($props.row.id)" size="mini">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="pageChange" background layout="prev, pager, next" :total="total"></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      tableData: [],
      page:1
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 更新商品状态
    updateStatus(row){
        // 最新状态
        const status=row.status==1?2:1;
        this.$http.post(`/index.php?c=product&a=update&id=${row.id}`,{
          status
        }).then(data=>{
          if(data.errcode==0){
            // index是当前商品对象在商品数组列表中的索引号
            const index=this.tableData.findIndex(item=>item.id==row.id)
            // 通过更新数据, 驱动页面更新
            this.tableData[index].status=status
          }
        })
    },
    getList() {
      this.$http
        .get("/index.php?c=product&a=lists", {
          params: {
            page: this.page,
            page_num: 10
          }
        })
        .then(data => {
          if (data.errcode === 0) {
            this.tableData = data.data.list;
            this.total = parseInt(data.data.total);
          }
        });
    },
    del() {},
    update() {},
    pageChange(page){
      this.page=page;
      // 重新请求数据
      this.getList();
    }
  }
};
</script>

<style>
.el-tag{
  cursor: pointer;
}
</style>